import React, { useEffect, useState } from 'react'
import { getBannerListFn, delBannerFn } from '../../api/banner'

import { Popconfirm, Table, Button, message, Image } from 'antd';


export default function Index() {


    const [bannerList, setbannerList] = useState([])

    useEffect(() => {
        getBannerListFn().then(res => {
            setbannerList(res.data)
        })
    }, [])

    const [current, setcurrent] = useState(1)
    const columns = [
        {
            title: '序号',
            render(t, r, i) {
                return <span>{(current - 1) * 5 + i + 1}</span>
            }
        },
        {
            title: '图片',
            dataIndex: 'img',
            render(t) {
                return <Image fallback='https://gw.alipayobjects.com/zos/antfincdn/aPkFc8Sj7n/method-draw-image.svg' style={{ height: 60 }} src={t} alt="" />
            }
        }, {
            title: '提示信息',
            dataIndex: 'alt'
        }, {
            title: '操作',
            render(t) {
                return <>
                    <Popconfirm
                        title='温馨提示'
                        description={<>
                            您确定要删除
                            <b style={{ color: 'red' }}> {t.alt} </b>
                            吗？
                        </>}
                        okText='确认'
                        cancelText='取消'
                        onConfirm={() => { delBanner(t) }}
                    >
                        <Button>删除</Button>
                    </Popconfirm>

                </>
            }
        }
    ]


    function delBanner(t) {
        // console.log(t);
        delBannerFn(t).then(res => {
            if (res.code == 200) {
                message.success('删除数据成功')

                getBannerListFn().then(res => {
                    setbannerList(res.data)
                })
            }
        })
    }

    return (
        <div>
            <h3>轮播图列表</h3>

            <Table
                rowKey={'bannerid'}
                dataSource={bannerList}
                columns={columns}
                pagination={{
                    current,
                    defaultPageSize: 5,
                    onChange(page) {
                        setcurrent(page)
                    }
                }}
            />
        </div>
    )
}
